<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>svg</title>
</head>
<style>
    #circle circle {
        animation: duration timing-function delay iteration-count direction fill-mode;
    }
</style>

<body>
    <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <text x="10" y="10" style="font-size: 12px;">path 指令和坐标之间需空格 </text>
        <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
        <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />

        <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5" />
        <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5" />

        <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5" />
        <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange"
            fill="transparent" stroke-width="5" />

        <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green"
            fill="transparent" stroke-width="5" />

        <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5" />
    </svg>

    <svg width="100" viewBox="0 0 100 100">
        <clipPath id="circle">
            <circle cx="50%" cy="50%" r="35"></circle>
        </clipPath>
        <path id="heart" d="M 10,30 A 20,20,0,0,1,50,30 A 20,20,0,0,1,90,30 Q 90,60,50,90 Q 10,60,10,30  Z" />
        <use clip-path="url(#circle)" xlink:href="#heart" fill="red" />

    </svg>
    <!-- 这种剪切 剪切的是内部， -->
    <svg width="100" viewBox="0 0 16 70" fill="#e6e6e6">
        <path d="M0 0 L 13 2  Q 16 4  16 6  V 64  Q 16 66 13 68 L 0 70 z">

        </path>
        <path d="M5 35 L10 32 V38 z " fill="#ccc">

        </path>
    </svg>
    <!--  C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy  三次贝塞尔曲线 前两组坐标分别是控制起始曲率（分别和起点 终点连成切线）
    L直线 V垂线 可只写纵坐标 H水平线 可只写横坐标  z闭合，默认为直线
    Q  x1 y1, x y (or q dx1 dy1, dx dy) 二次贝塞尔 第一个坐标为控制点（和起点终点连成切线）

    -->

    <!--  A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
椭圆 前两个参数 为半轴半径 第三个 旋转角度 deg  最后两个代表结束位置
-->
    <!-- path的坐标会随viewBox等比例缩放 故写的比较小可能导致path特别大 -->
    <svg width="300" viewBox="0 0 200 300" fill="red">
        <path d="M80,80 L125,80 C 200,100  100,100  100,230 A 20 20 0 0 1 1 1 Z" stroke="green">
        </path>
    </svg>
    <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M80 80
                 A 45 45, 0, 0, 0, 125 125
                 L 125 80 Z" fill="green" />
        <path d="M230 80
                 A 45 45, 0, 1, 0, 275 125
                 L 275 80 Z" fill="red" />
        <path d="M80 230
                 A 45 45, 0, 0, 1, 125 275
                 L 125 230 Z" fill="purple" />
        <path d="M230 230
                 A 45 45, 0, 1, 1, 275 275
                 L 275 230 Z" fill="blue" />
    </svg>
    <svg t="1623203707079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4994" width="200" height="200">
        <rect x="0" y="0" width="1024" height="1024" fill="#7DCCCE"></rect>
        <path
            d="M449.1 815.8L320.8 431.1l-38.7 114.8H129v-70h102.9l89.3-265.2L448.9 594l127.9-385.8L705.1 591l38.8-115.1H895v70H794.1l-89.2 264.9-127.7-381.2z"
            fill="#fff" p-id="4996"></path>
    </svg>
    <svg viewBox="0 0 500 210" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:rgb(209, 179, 7);stroke:rgb(238, 255, 0);stroke-width:5;fill-rule:nonzero;" />
    </svg>
    <svg width="150" viewBox="0 0 63 55">
        <path d="M 0 7
         H 33 
         L 38 0
         H 63 
         V 55 
         H 0 
         z" fill="#fec03d">
        </path>
        <rect x="5" y="40" width="53" height="3" fill="#fff"></rect>
    </svg>
    <svg width="100" 
         viewBox="0 0 100 100" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="m50 0 a 50 50 0 0 1 0 100
                      a 25 25 0 0 1 0  -50
                      a 25 25 0 0 0 0 -50   "
             fill=""  />
         <circle cx="50" cy="75" r="5" fill='red'  />    
         <circle cx="50" cy="25" r="5" fill='#000'  />    
    </svg>
</body>

</html>